<template>
    <div class="content">
        <div class="img">
            <img src="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581318577000/99d4ae3ef19e5f2377bbf657e54c8ec.png">
        </div>
        <div class="body">
            <template>
                <yd-accordion>
                    <yd-accordion-item :title="'位置：'+this.area">
                        <div class="area" style="width: 100%">
                            <yd-cell-group style="width: 100%">
                                <yd-cell-item arrow>
                                    <input slot="right" type="text" @click.stop="show1 = true" v-model="location" readonly placeholder="请选择地址">
                                </yd-cell-item>
                            </yd-cell-group>
                            <yd-cityselect v-model="show1" :callback="result1" :items="district" provance="北京"></yd-cityselect>
                        </div>
                    </yd-accordion-item>
                    <yd-accordion-item :title="'桌数：'+this.desknum">
                            <yd-radio-group v-model="desknum">
                                <div style="display: flex; flex-wrap:wrap;padding-left: 10%;margin: 12px 0">
                                    <div  v-for="(item,index) in deskmsg" :key="index" style="margin: 8px 0;width: 33%" >
                                        <yd-radio  :val="item">{{item}}</yd-radio>
                                    </div>
                                </div>
                            </yd-radio-group>
                    </yd-accordion-item>
                    <yd-accordion-item :title="'每桌预算：'+this.budgetnum">
                        <yd-radio-group v-model="budgetnum">
                            <div style="display: flex; flex-wrap:wrap;padding-left: 5%;margin: 12px 0">
                                <div  v-for="(item,index) in budgetmsg" :key="index" style="margin: 8px 0;width: 33%" >
                                    <yd-radio  :val="item">{{item}}</yd-radio>
                                </div>
                            </div>
                        </yd-radio-group>
                    </yd-accordion-item>
                    <yd-accordion-item :title="'婚礼日期：'+this.dateinput">
                        <div class="wedding-date">
                        <yd-cell-item arrow>
                            <yd-datetime type="date" v-model="dateinput" slot="right"></yd-datetime>
                        </yd-cell-item>
                        </div>
                    </yd-accordion-item>
                   <!--<yd-accordion-item :title="'婚礼日期：'+this.dateinput">
                     <yd-cell-item>
                           <yd-input slot="right" type="date" v-model="dateinput" max="20" placeholder="请输入婚礼日期"></yd-input>
                        </yd-cell-item>
                  </yd-accordion-item>-->
                    <yd-accordion-item :title="'婚礼形式：'+this.typenum">
                        <yd-radio-group v-model="typenum">
                            <div style="display: flex; flex-wrap:wrap;padding-left: 10%;margin: 12px 0">
                                <div  v-for="(item,index) in typemsg" :key="index" style="margin: 8px 0;width: 33%" >
                                    <yd-radio  :val="item">{{item}}</yd-radio>
                                </div>
                            </div>
                        </yd-radio-group>
                    </yd-accordion-item>
                </yd-accordion>
            </template>
            <yd-button @click.native="showmodal = true" size="large" type="primary">立即查询</yd-button>
        </div>
        <yd-popup v-model="showmodal" position="center" width="90%">
            <div style="background-color:#fff;border-radius: 20px;text-align: center;padding-top: 30px">
                <template>
                    <div style="width: 80%;margin-left: 10%">
                        <yd-cell-group>
                            <yd-cell-item>
                                <span slot="left">姓名：</span>
                                <yd-input slot="right" required v-model="name" max="20" placeholder="请输入姓名"></yd-input>
                            </yd-cell-item>
                            <yd-cell-item>
                                <span slot="left">手机号：</span>
                                <yd-input slot="right" v-model="phone" regex="mobile" placeholder="请输入手机号码"></yd-input>
                            </yd-cell-item>
                        </yd-cell-group>
                    </div>
                    <yd-button size="small" type="primary" style="margin-bottom: 10px;width: 50px" @click.native="affirm">确定</yd-button>
                </template>
            </div>
        </yd-popup>
        <yd-popup v-model="successmodal" position="center" width="90%">
            <div style="background-color:#fff;border-radius: 20px;text-align: center;padding-top: 15px;height: 40px">
               <span style="font-size: 12px">成功</span>
            </div>
        </yd-popup>
    </div>
</template>

<script>

import District from 'ydui-district/dist/jd_province_city_area_id'
import { insertwedding } from '@/api/youyue'
export default {
  name: 'index',
  data () {
    return {
      successmodal: false,
      show1: false,
      area: '北京',
      district: District,
      location: '北京',
      desknum: '待定',
      deskmsg: [
        '不限',
        '1-10桌',
        '10-20桌',
        '20-30桌',
        '30-40桌',
        '40-50桌',
        '50-60桌',
        '待定'
      ],
      budgetnum: '待定',
      budgetmsg: [
        '不限',
        '3000-4000元/桌',
        '4000-5000元/桌',
        '5000-6000元/桌',
        '6000元以上/桌',
        '待定'
      ],
      typenum: '待定',
      typemsg: [
        '不限',
        '室内',
        '户外草坪',
        '阳光房',
        '待定'
      ],
      dateinput: '',
      showmodal: false,
      name: '',
      phone: '',
      city: '',
      region: ''
    }
  },
  methods: {
    result1 (ret) {
      this.location = this.area + ' ' + ret.itemName2 + ' ' + ret.itemName3
      this.area = this.location
      this.city = '北京'
      this.region = ret.itemName2 + ' ' + ret.itemName3
    },
    affirm () {
      this.showmodal = false
      let data = {
        city: this.city,
        region: this.region,
        desknum: this.desknum,
        budgetnum: this.budgetnum,
        type: this.typenum,
        date: this.dateinput,
        name: this.name,
        phone: this.phone
      }
      insertwedding(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.successmodal = true
        }
      })
    }
  }
}
</script>

<style scoped >
    .img{
        width: 100%;
    }
    .img img{
        width: 100%;
    }
    .area>>>.yd-cityselect-title{
        height: 20px;
        line-height: 20px;
    }
    .area>>>.yd-cityselect-nav>a{
        font-size: 6px;
        padding: 0 0;
        height: 15px;
        line-height: 15px;
    }
    .area>>>.yd-cityselect-item-box>a span{
        font-size: 5px;
    }
    .area>>>.yd-cityselect-item-box>a{
        height: 10px;
        line-height: 10px;
    }
    .area>>>.yd-cityselect-content{
        padding-top:35px
    }
    .area>>>.yd-cityselect-item-box{
        padding: 0 10px;
    }
    .area>>>.yd-cell-box{
        margin-bottom:0
    }
    .body>>>.yd-accordion-head-arrow:after{
        border-left:2px solid transparent;
        border-right:2px solid transparent;
        border-bottom:3px solid #a0a0a0
    }
    .body>>>.yd-accordion-title{
        font-size: 6px;
    }
    .body>>>.yd-radio-text{
        font-size: 4px;
    }
    .body>>>.yd-radio{
        padding: 0 0;
    }
    .content>>>.yd-confirm{
        font-size: 4px;
    }
    .content>>>.yd-confirm-hd{
        padding: 5px 5px;
    }
    .content>>>.yd-confirm-bd{
        font-size: 4px;
    }
    .wedding-date>>>.yd-cell-left{
        font-size: 0.375rem;
    }
    .wedding-date>>>.yd-datetime-input{
        font-size: 0.375rem;
    }
</style>
